<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
	background: url('images/loginbg.jpg') repeat-y;
	background-size: cover;
}
</style>
</head>
<body>
	<!--登录模态框-->
	<!-- data-backdrop="static" 点击模态框外部，模态框不消失-->
	<div class="modal" id="loginModal" data-backdrop="static"
		style="width: 100%; height: 100%; padding: 9% 25% 0 25%">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title text-center">
						<img src="images/logo.png" width="190" height="60" />
					</h3>
				</div>
				<div class="modal-body border">
					<form class="form-horizontal" method="post" action="login">
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-user"></span>
								</div>
								<input type="text" name="userId" class="form-control"
									placeholder="请输入用户账号" />
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock"></span>
								</div>
								<input type="password" name="userPwd" class="form-control"
									placeholder="请输入用户密码" />
							</div>
						</div>
						<div class="col-md-8 col-md-offset-2"
							style="margin-top: 15px; margin-bottom: 15px; text-align: center">
							<label class="checkbox-inline"> <input type="radio"
								name="user" value="user" checked> 用户
							</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label
								class="checkbox-inline"> <input type="radio" name="user"
								value="admin"> 管理员
							</label>
						</div>
						<div class="input-group col-md-8 col-md-offset-2">
							<button type="submit" class="btn btn-danger btn-block">登
								录</button>
						</div>
					</form>
				</div>
				<div class="modal-footer border">
					<div class="col-md-8 col-md-offset-2">
						<a href="javascript:doRejister()">还没注册?快去注册。。。</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 注册模态框 -->
	<div class="modal " id="rejisterModal" data-backdrop="static"
		style="margin: 1% 25% 0 25%">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title text-center" id="title">琥珀时光影城注册</h3>
				</div>
				<div class="modal-body border">
					<form class="form-horizontal" method="post"
						action="userServlet?method=add" onsubmit="return getPwd()">
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-user"></span>
								</div>
								<input type="text" name="userId" class="form-control"
									placeholder="请输入用户id" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-user"></span>
								</div>
								<input type="text" name="userName" class="form-control"
									placeholder="请输入用户名" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock"></span>
								</div>
								<input type="password" id="userpwd" name="" class="form-control"
									placeholder="请输入用户密码" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock"></span>
								</div>
								<input type="password" id="userpwdValidate" name="userPwd"
									class="form-control" placeholder="再次输入密码" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-envelope"></span>
								</div>
								<input type="email" name="email" class="form-control"
									placeholder="请输入邮箱" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone"></span>
								</div>
								<input type="text" name="mobile" class="form-control"
									placeholder="请输入电话" required/>
							</div>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px;">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-usd"></span>
								</div>
								<input type="text" name="balance" maxlength="7" class="form-control"
									placeholder="请输入充值金额" value="0"/>
							</div>
						</div>
						<div class="col-md-8 col-md-offset-2"
							style="margin-top: 15px; margin-bottom: 15px; text-align: center">
							<label class="checkbox-inline"> <input type="radio"
								name="sex" value="男" checked> 男
							</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label
								class="checkbox-inline"> <input type="radio" name="sex"
								value="女"> 女
							</label>
						</div>
						<div class="input-group col-md-8 col-md-offset-2"
							style="margin-top: 15px; margin-bottom: 10px;">
							<button type="submit" class="btn btn-danger btn-block"
								id="rejisterBtn">注 册</button>
						</div>
					</form>
				</div>
				<div class="modal-footer border">
					<div class="col-md-8 col-md-offset-2">
						<a href="javascript:doLogin()">已注册，快去登录。。。</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){  
			doLogin();
		});
		
		
		/**
		 * 注册
		 */
		function doRejister() {
			$("#title").html("琥珀时光影城注册");
			// 注册模态框显示
			$("#rejisterModal").modal("show");
			//登录模态框隐藏
		    $("#loginModal").modal("hide");   
		}
		
		/**
		 * 登录
		 */
		function doLogin() {
			//登录模态框显示
			$("#loginModal").modal("show");  
			// 注册模态框隐藏
            $("#rejisterModal").modal("hide");  
		}
		
		/* 密码验证 */
		function getPwd(){
			var password=$("#password").val();
			var pwd=$("#pwd").val();
			if(password!=pwd){
				alert("两次输入密码不一样，请再次确认!!!");
				return false;
			}
			return true;
		}
	</script>
</body>
</html>